<template>
  <div>
    <div @keydown.enter="getList" class="search">
      <el-form :inline="true" :model="searchData" @submit.native.prevent>
        <el-form-item label="关键词">
          <el-input v-model="searchData.keyword" placeholder="关键词" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-search" size="small"
            @click="getList">查询</el-button>
        </el-form-item>
        <el-form-item label="">
          <el-button v-if="$global.hasPermission('manager/add')" type="primary" icon="el-icon-plus"
            size="small" @click="btnShowForm('add')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" fit highlight-current-row>
      <el-table-column label="账户" prop="loginCode" align="center">
        <template slot-scope="scope">
          <span style="margin-right: 10px;">{{ scope.row.loginCode }}</span>
          <el-tag v-if="scope.row.loginCode == 'admin'">根账户</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="角色" prop="roleKey" align="center" />
      <el-table-column label="昵称" prop="userName" align="center" />

      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button v-if="$global.hasPermission('manager/update')" size="small" class="blackStyle" type="text"
            @click="btnShowForm('edit', scope.row)">修改</el-button>
          <el-button v-if="$global.hasPermission('manager/delete')" size="small" class="blackStyle" type="text"
            @click="deleteItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @current-change="currentChange" :page-size="searchData.pageSize" :total="totalCount"
      style="float: right; margin-top: 10px;" background layout="prev, pager, next">
    </el-pagination>
    <el-dialog :title="(formDialog.type == 'add' ? '新增' : '编辑')" :visible.sync="formDialog.show" width="40%" class="dialog_form">
      <el-form :model="form" class="demo-form-inline">
        <input type="text" name="a72f8d" style="display: none;">
        <input type="password" name="b4e9c1" style="height: 0px;width: 0px;border: 0px;padding: 0px;">
        <el-form-item label="帐号" label-width="80px" required>
          <el-input v-model="form.loginCode" placeholder="帐号" clearable :readonly="formDialog.type == 'edit'" />
        </el-form-item>
        <el-form-item label="密码" label-width="80px" required :hidden="formDialog.type == 'edit'">
          <el-input show-password v-model="form.password" placeholder="密码" clearable />
        </el-form-item>
        <el-form-item label="昵称" label-width="80px">
          <el-input v-model="form.userName" placeholder="昵称" clearable />
        </el-form-item>
        <el-form-item label="角色" label-width="80px" required>
          <el-select v-model="form.roleKey" filterable placeholder="请选择">
            <el-option v-for="item in listRole" :key="item.key" :label="item.key" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>

        <div style="display: flex;flex-direction: column;padding-left: 50px;">
          <!-- <i class="el-icon-info" style="color: #888;"></i> -->
          <span class="tip"><i class="el-icon-info" style="color: #888;"></i>管理员: 所有权限</span>
          <span class="tip"><i class="el-icon-info" style="color: #888;"></i>审计: 仅查看业务数据、操作日志</span>
          <span class="tip"><i class="el-icon-info" style="color: #888;"></i>用户: 仅可以查看、编辑自己创建的数据</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit" v-loading="formDialog.loading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      searchData: {
        pageIndex: 1,
        pageSize: 10,
      },
      totalCount: 0,
      form: {},
      formDialog: {
        title: '新增角色',
        show: false,
        type: 'add',
        loading: false,
      },
      listRole: []
    }
  },
  created() {
    this.getList()
    this.getRoleList()
  },
  methods: {
    getList() {
      let that = this
      that.listLoading = true
      that.$system
        .get('manager/get', this.searchData)
        .then((res) => {
          this.list = res.list
          this.totalCount = res.totalCount
        })
        .catch((res) => { })
        .finally(() => {
          that.listLoading = false
        })
    },
    deleteItem(_id) {
      this.$confirm('确定删除该数据?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true
          this.$system
            .delete('manager/delete', { id: _id })
            .then((res) => {
              this.$tip.success()
              this.getList()
            })
            .catch(() => { })
            .finally(() => {
              this.listLoading = false
            })
        })
        .catch(() => { })
    },
    btnShowForm(type, item) {
      this.formDialog.type = type
      this.form = {}
      this.formDialog.show = true
      if (this.formDialog.type === 'edit') {
        this.form = this.$format.deepCopy(item)
      }
    },
    currentChange(val) {
      this.searchData.pageIndex = val
      this.getList()
    },
    submit() {
      // debugger
      let that = this
      this.formDialog.loading = true
      if (that.formDialog.type == 'edit') {
        this.$system
          .put('manager/update', that.form)
          .then((res) => {
            this.$tip.success()
            that.formDialog.show = false
            that.getList()
          })
          .catch()
          .finally(() => {
            this.formDialog.loading = false
          })
      } else {
        this.$system
          .post('manager/add', that.form)
          .then((res) => {
            this.$tip.success()
            that.formDialog.show = false
            that.getList()
          })
          .catch()
          .finally(() => {
            this.formDialog.loading = false
          })
      }
    },
    getRoleList() {
      this.$system
        .get('Manager/GetRoles', {})
        .then((res) => {
          this.listRole = res
        })
        .catch()
        .finally(() => { })
    },
  },
}
</script>
<style scoped>
.dialog_form .el-dialog__body {
  padding: 0px 30px;
}
.tip {
   margin-left: 10px;
   font-size: 12px;
   color: gray;
   padding-bottom: 4px;
 }
</style>